<script setup lang="ts">
import {ref, onMounted} from "vue";
import Sortable, {Swap} from "sortablejs";
import useConfigStore from '@/store/useConfigStore'
// import draggable from "vuedraggable/src/vuedraggable";
// import {useAppStoreHook} from "@/store/modules/app";

defineOptions({
  name: "Draggable"
});
const store = useConfigStore()

const leftList = ref([
  {grid: "cn", name: 1}

]);
const rightList = ref([
  {grid: "cn", name: 2},
  {grid: "cn", name: 3},
  {grid: "cn", name: 4},
  {grid: "cn", name: 5},
  {grid: "cn", name: 6},
  {grid: "cn", name: 7},
  {grid: "cn", name: 8},
  {grid: "cn", name: 9}
])

const lists = ref([
  {people: "cn", id: 1, name: "www.itxst.com"},
  {people: "cn", id: 2, name: "www.baidu.com"},
  {people: "cn", id: 3, name: "www.taobao.com"},
  {people: "cn", id: 4, name: "www.google.com"}
]);

const cutLists = ref([
  {people: "cn", id: 1, name: "cut1"},
  {people: "cn", id: 2, name: "cut2"},
  {people: "cn", id: 3, name: "cut3"},
  {people: "cn", id: 4, name: "cut4"}
]);

function addContent() {
  //随机生成
  const random = Math.floor(Math.random() * 10000);
  const newItem = {people: "cn", id: random, name: "newItem" + random};
  cutLists.value.push(newItem);
}

const change = (evt): void => {
  console.log("evt: ", evt);
};

onMounted(() => {
  if (!store.sortSwap) Sortable.mount(new Swap());
  store.setSortSwap(true)

  new Sortable(document.querySelector(".left-container"), {
    group: 'shared',
    chosenClass: "chosen",
    animation: 300
  });
  new Sortable(document.querySelector(".right-container"), {
    group: 'shared',
    chosenClass: "chosen",
    animation: 300
  });
  new Sortable(document.querySelector(".cut-container"), {
    swap: true,
    forceFallback: true,
    chosenClass: "chosen",
    animation: 300
  });
  new Sortable(document.querySelector(".lists-container"), {
    forceFallback: true,
    chosenClass: "chosen",
    filter: '.filtered',
    animation: 300
  });
});
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span class="font-medium">
          拖拽组件，采用开源的
          <el-link
              href="https://sortablejs.github.io/Sortable/"
              target="_blank"
              style="margin: 0 4px 5px; font-size: 16px"
          >
            sortablejs
          </el-link>
        </span>
      </div>

    </template>
    <div class="drag-container">
      <!-- grid列表拖拽 -->
      <el-row :gutter="25">
        <el-col :xs="25" :sm="8" :md="8" :lg="8">
          <el-card shadow="never">
            <template #header>
              <div class="card-header">
                <span>共享列表</span>
              </div>
            </template>

            <div style="display: flex">
              <div class="left-container" style="flex:1">
                <div
                    v-for="(item, index) in leftList"
                    :key="index"
                    class="item-single no-select"
                >
                  <p>{{ item.name }}</p>
                </div>
              </div>
              <div class="right-container" style="flex:1">
                <div
                    v-for="(item, index) in rightList"
                    :key="index"
                    class="item-single no-select"
                >
                  <p>{{ item.name }}</p>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="25" :sm="8" :md="8" :lg="8">
          <el-card shadow="never">
            <template #header>
              <div class="card-header">
                <span>单列拖拽</span>
              </div>
            </template>
            <div class="lists-container">
              <div
                  v-for="(item, index) in lists"
                  :key="index"
                  :class="['item-single' ,'no-select', `${index===0?'filtered':''}`]"
              >
                <p>{{ item.name }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="25" :sm="8" :md="8" :lg="8">
          <el-card shadow="never">
            <template #header>
              <div class="card-header">
                <span>拖拽实现元素位置交换</span>
              </div>
            </template>
            <!-- 拖拽实现元素位置切换 -->
            <div class="cut-container">
              <div
                  v-for="(item, index) in cutLists"
                  :key="index"
                  class="item-cut no-select"
              >
                <p>{{ item.name }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
/* grid列表拖拽 */
.grid-container {
  display: grid;
  grid-template-rows: 33.3% 33.3% 33.3%;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

.item-single {
  height: 77px;
  font-size: 1.5em;
  line-height: 85px;
  text-align: center;
  cursor: move;
  border: 1px solid #e5e4e9;
}

.item-cut {
  height: 77px;
  font-size: 1.5em;
  line-height: 77px;
  text-align: center;
  cursor: move;
  border: 1px solid #e5e4e9;
}

.item {
  font-size: 2em;
  line-height: 100px;
  text-align: center;
  cursor: move;
  border: 1px solid #e5e4e9;

  @media screen and (width <= 750px) {
    line-height: 90px;
  }
}

.item-1 {
  background-color: #ef342a;
}

.item-2 {
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}

.filtered {
  background: red;
}

.no-select {
  user-select: none; /* 对大多数浏览器有效 */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
}

.chosen {
  border: solid 2px #3089dc !important;
}
</style>